<!DOCTYPE html>
<html lang="en">
   <head>
        <meta charset="UTF-8">
        <title>医院科室</title>
        <meta http-equiv="Window-target" content="_top">
        <meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-title" content="标题"/>
        <link rel="apple-touch-icon-precomposed" href="png"/>
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="png"/>   
        <script src="../../js/flexible.debug.js"></script>
        <script src="../../js/flexible_css.debug.js"></script>
        <link rel="stylesheet" type="text/css" href="../../css/Re_deppart.css"/>
    </head>
    <body>
       <header>
        <!-- 返回 -->
            <img class="Re_deppart_back" src="../../imgs/return.png">
            <p>科室</p>

        </header>
        <main>
            <div class="deppart_Left">
                <article class="zhu active">
                    <p>其他</p>
                </article>
                <article class="zhu">
                    <p>妇儿</p>
                </article>
                <article class="zhu">
                    <p>外科</p>
                </article>
                
                <article class="zhu">
                    <p>内科</p>
                </article>

            </div>
            
            <div class="deppart_Right">
            <!-- 第一个其他 -->
                <section class="box1 show1">
                     <!-- <article class="fu">
                        <p>口腔正畸</p>
                    </article>
                    <article class="fu">
                        <p>整形外科</p>
                    </article>
                    <article class="fu">
                        <p>整形外科</p>
                    </article>
                    <article class="fu">
                        <p>整形外科</p>
                    </article>  -->
                </section>

                <!-- 第二个其他 -->
                <section class="box1 show2" style="display:none;">
                     <!-- <article class="fu">
                        <p>生殖内分泌</p>
                    </article>
                    <article class="fu">
                        <p>妇泌尿</p>
                    </article>
                    <article class="fu">
                        <p>计划生育</p>
                    </article>  -->
                </section>

                <!-- 第三个其他 -->
                <section class="box1 show3" style="display:none;">
                    <!-- <article class="fu">
                        <p>整形外科</p>
                    </article>
                    <article class="fu">
                        <p>胸外科</p>
                    </article>
                    <article class="fu">
                        <p>乳腺外科</p>
                    </article>  -->
                </section>

                 <!-- 第四个其他 -->
                <section class="box1 show4" style="display:none;">
                     <!-- <article class="fu">
                        <p>急症科</p>
                    </article>
                    <article class="fu">
                        <p>呼吸内科</p>
                    </article>  -->
                </section>

            </div>




        </main>
     <script src="../../js/jquery.js"></script>
    <script>


    //返回
    $('.Re_deppart_back').click(function(){
       history.back();
    });
    //
    $('.zhu').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        var index = $(this).index();
        $('section').hide();
        $('section').eq(index).show();
    })
    $.ajax({
            type:'GET',
            url:'http://172.16.24.240:8080/message',
            success:function(date){
                var data = date[0].qita;
                var elses ="";

                var data1 = date[1].fu;
                var wom ='';

                var out = '';
                var data2 = date[2].wai;


                var aside = '';
                var data3 = date[3].nei;
                $.each(data,function(i,n){
                    elses += "<article class='fu'><p>"+n.infos+"</p></article>";                  
                });

                $.each(data1,function(i,n){
                    wom += "<article class='fu'><p>"+n.infos+"</p></article>";                  
                });

                $.each(data2,function(i,n){
                    out += "<article class='fu'><p>"+n.infos+"</p></article>";                  
                });

                $.each(data3,function(i,n){
                    aside += "<article class='fu'><p>"+n.infos+"</p></article>";                  
                });

                    $('.show1').append(elses); 
                    $('.show2').append(wom);
                    $('.show3').append(out); 
                    $('.show4').append(aside);  

            }
        })
    



    </script>

    </body>
</html>